<template>
  <div class="class-view">
    <!-- 页面标题栏 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          <i class="el-icon-user"></i>
          班级管理
        </h1>
        <p class="page-description">管理学校的班级信息</p>
      </div>
      <div class="header-right">
        <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">
          新增班级
        </el-button>
      </div>
    </div>
    
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="班级名">
          <el-input v-model="searchForm.name" placeholder="请输入班级名" clearable></el-input>
        </el-form-item>
        <el-form-item label="系名">
          <el-input v-model="searchForm.departmentName" placeholder="请输入系名" clearable></el-input>
        </el-form-item>
        <el-form-item label="专业名">
          <el-input v-model="searchForm.majorName" placeholder="请输入专业名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="班级名"></el-table-column>
        <el-table-column prop="grade" label="年级"></el-table-column>
        <el-table-column prop="majorName" label="专业"></el-table-column>
        <el-table-column prop="departmentName" label="系"></el-table-column>
        <el-table-column label="操作" width="160" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="action-buttons">
              <el-button 
                size="mini" 
                type="primary" 
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
                class="action-btn edit-btn">
                编辑
              </el-button>
              <el-button 
                size="mini" 
                type="danger" 
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                class="action-btn delete-btn">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="班级名" prop="name">
          <el-input v-model="form.name" placeholder="请输入班级名"></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-input-number v-model="form.grade" :min="2000" :max="2030" placeholder="请输入年级，如2023"></el-input-number>
        </el-form-item>
        <el-form-item label="所属专业" prop="majorId">
          <el-select v-model="form.majorId" placeholder="请选择所属专业">
            <el-option
              v-for="item in majorOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getClassPage, getClassPageCount, saveClass, deleteClass, getClassById, getMajorNames } from '@/api'

export default {
  name: 'ClassView',
  data() {
    return {
      searchForm: { name: '', departmentName: '', majorName: '' },
      tableData: [],
      majorOptions: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      dialogTitle: '添加班级',
      form: { id: -1, name: '', grade: 2023, majorId: '' },
      rules: {
        name: [{ required: true, message: '请输入班级名', trigger: 'blur' }],
        grade: [
          { required: true, message: '请输入年级', trigger: 'blur' },
          { type: 'number', message: '年级必须为数字', trigger: 'blur' }
        ],
        majorId: [{ required: true, message: '请选择所属专业', trigger: 'change' }]
      }
    }
  },
  mounted() { this.loadData(); this.loadMajors(); },
  methods: {
    async loadData() {
      try {
        const countRes = await getClassPageCount(this.searchForm)
        this.total = countRes.data * this.pageSize
        const res = await getClassPage(this.currentPage, this.searchForm)
        this.tableData = res.data || []
      } catch (error) {
        this.$message.error('加载数据失败')
        console.error('加载班级列表数据失败:', error)
      }
    },
    async loadMajors() {
      try {
        const res = await getMajorNames()
        this.majorOptions = res.data || []
      } catch (error) { console.error('加载专业列表失败:', error) }
    },
    handleSearch() { this.currentPage = 1; this.loadData() },
    resetSearch() { this.searchForm = { name: '', departmentName: '', majorName: '' }; this.handleSearch() },
    showAddDialog() { this.dialogTitle = '添加班级'; this.form = { id: -1, name: '', grade: 2023, majorId: '' }; this.dialogVisible = true },
    async handleEdit(row) {
      try { const res = await getClassById(row.id); this.dialogTitle = '编辑班级'; this.form = { ...res.data }; this.dialogVisible = true } catch (e) { this.$message.error('获取班级信息失败') }
    },
    handleDelete(row) {
      this.$confirm('确定删除该班级吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        .then(async () => { try { await deleteClass(row.id); this.$message.success('删除成功'); this.loadData() } catch (e) { this.$message.error('删除失败') } })
    },
    async handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try { await saveClass(this.form); this.$message.success(this.form.id === -1 ? '添加成功' : '编辑成功'); this.dialogVisible = false; this.loadData() } catch (e) { this.$message.error(this.form.id === -1 ? '添加失败' : '编辑失败') }
        }
      })
    },
    handleSizeChange(val) { this.pageSize = val; this.loadData() },
    handleCurrentChange(val) { this.currentPage = val; this.loadData() }
  }
}
</script>

<style scoped>
.class-view { padding: 24px; min-height: calc(100vh - 120px); background: #f5f6fa; }
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; background:white; padding:24px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.1); border:1px solid #e8e9ea; }
.header-left { flex:1; }
.page-title { margin:0 0 8px 0; font-size:28px; font-weight:700; color:#1a1a1a; display:flex; align-items:center; }
.page-title i { margin-right:12px; color:#409eff; font-size:32px; }
.page-description { margin:0; color:#6c757d; font-size:15px; font-weight:400; }
.header-right { display:flex; align-items:center; }
.search-card { margin-bottom:20px; }
.table-card { margin-bottom:20px; }
.el-pagination { margin-top:20px; text-align:right; }
.action-buttons { display:flex; gap:8px; justify-content:center; align-items:center; }
:deep(.action-btn){ width:60px !important; height:28px !important; padding:0 !important; border-radius:4px !important; font-size:12px !important; display:flex !important; align-items:center !important; justify-content:center !important; min-width:60px !important; }
:deep(.edit-btn){ background-color:#409eff !important; border-color:#409eff !important; color:white !important; }
:deep(.edit-btn:hover){ background-color:#66b1ff !important; border-color:#66b1ff !important; }
:deep(.delete-btn){ background-color:#f56c6c !important; border-color:#f56c6c !important; color:white !important; }
:deep(.delete-btn:hover){ background-color:#f78989 !important; border-color:#f78989 !important; }
</style>
